<template>
  <div>
      <el-card style="margin:20px 0px">
        <CategorySelect @getCategoryId="getCategoryId" :cantshow="!isShowTable"></CategorySelect>
      </el-card>
      <el-card>
        <!-- 展示属性列表 -->
        <div v-show="isShowTable">
          <el-button type="primary" icon="el-icon-plus" style="margin:10px 0" :disabled="!category3Id" @click="addAttr">
            添加属性
          </el-button>
          <el-table style="width:100%" border :data="attrList">
            <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
            <el-table-column prop="attrName" label="属性名称" width="150px"></el-table-column>
            <el-table-column prop="prop" label="属性值列表">
              <template slot-scope="{row,$index}">
                <el-tag type="success" v-for="(attrValue,index) in row.attrValueList" :key="attrValue.id" style="margin:0px 8px">
                  {{attrValue.valueName}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150px">
              <template slot-scope="{row,$index}">
                <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateAttr(row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 添加修改属性结构 -->
        <div v-show="!isShowTable">
          <el-form :inline="true" ref="form" label-width="60px" :model="attrInfo">
            <el-form-item label="属性名">
              <el-input placeholder="请输入属性名" v-model="attrInfo.attrName"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" icon="el-icon-plus" @click="addAttrValue" :disabled="!attrInfo.attrName">添加属性值</el-button>
          <el-button @click="isShowTable=true">取消</el-button>
          <el-table border style="width:100%;margin: 10px 0;" :data="attrInfo.attrValueList">
            <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
            <el-table-column prop="prop" label="属性值名称">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.valueName" :ref="$index" placeholder="请输入属性值名称" size="mini" v-if="row.flag" @blur="toLook(row)" @keyup.native.enter="toLook(row)"></el-input>
                <span v-else @click="toEdit(row,$index)" style="display:block">{{row.valueName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作">
              <template slot-scope="{row,$index}">
                <el-popconfirm :title="`确定删除属性值${row.valueName}吗？`" @onConfirm="deleteAttrValue($index)">
                  <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"></el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="addOrUpdateAttr" :disabled="attrInfo.attrValueList.length<1">保存</el-button>
          <el-button @click="isShowTable=true">取消</el-button>
        </div>
      </el-card>
  </div>
</template>

<script>
// 按需引入lodash中的深拷贝
import cloneDeep from 'lodash/cloneDeep';
export default {
    name: "Attr",
    data() {
      return {
        category1Id:'',
        category2Id:'',
        category3Id:'',
        attrList:[], //接收平台属性数据
        isShowTable:true, //控制table显示与隐藏
        // 收集新增或修改属性
        attrInfo:{
          attrName:'', //属性名
          //属性值列表，每一个属性都是一个对象
          attrValueList:[],
          categoryId:0, //三级分类的id
          categoryLevel:3, //服务器也需要区分是几级id
        },
        flag:true,
      }
    },
    methods: {
      // 自定义事件的回调
      getCategoryId({categoryId,level}){
        if(level==1){
          this.category1Id = categoryId;
          this.category2Id = '';
          this.category3Id = '';
        }else if(level==2){
          this.category2Id = categoryId;
          this.category3Id = '';
        }else{
          this.category3Id = categoryId;
          // 如果有3id，则发请求获取平台属性
          this.getAttrList();
        }
      },
      // 发请求获取平台属性
      async getAttrList(){
        const {category1Id,category2Id,category3Id} = this;
        let result = await this.$API.attr.reqAttrList(category1Id,category2Id,category3Id);
        if(result.code==200){
          this.attrList = result.data;
        }
      },
      // 添加属性值回调
      addAttrValue(){
        // 向属性值数组里添加元素
        // attrId:是相应属性的id，此时还没有属性id，给服务器是undefined
        // valueName:相应属性值名称
        // flag:给每个属性值添加一个flag，用于控制el-input和span的切换
        this.attrInfo.attrValueList.push({
          attrId:this.attrInfo.id, //对于修改某一属性中增加的属性值，需要把已有属性id带上
          valueName:'',
          flag:true, 
        });
        this.$nextTick(()=>{
          this.$refs[this.attrInfo.attrValueList.length-1].focus();
        })
      },
      // 添加属性按钮的回调
      addAttr(){
        this.isShowTable = false;
        this.attrInfo = {
          attrName:'',
          attrValueList:[],
          categoryId:this.category3Id, // 此处可以收集三级分类的id
          categoryLevel:3,
        }
      },
      // 修改某一属性回调
      updateAttr(row){
        this.isShowTable = false;
        // 将选中的属性赋值给attrInfo
        // 由于数据结构存在数组里套对象，因此使用深拷贝解决这类问题
        this.attrInfo = cloneDeep(row);
        // 在修改某一个属性时，给相应的属性值添加flag
        this.attrInfo.attrValueList.forEach(item => {
          this.$set(item,'flag',false);
        });
      },
      // 失去焦点的事件--展示span
      // row形参是当前用户添加的最新的属性值
      toLook(row){
        // 如果属性值为空，给用户提示重新输入
        if(row.valueName.trim()==''){
          this.$message('属性值不能为空');
          return;
        }
        // 新增的属性值不能与已有的属性值重复
        let isRepeat = this.attrInfo.attrValueList.some(item=>{
          // 需要在判断时将row从数组中刨去
          if(row!==item){
            return row.valueName==item.valueName;
          }
        });
        if(isRepeat){
          this.$message('该属性值已存在');
          return;
        }
        // 切换查看模式
        row.flag = false;
      },
      // 点击span回调--进入编辑模式
      toEdit(row,index){
        row.flag = true;
        // 获取input节点，实现自动聚焦
        // 点击span切换input会触发回流和重绘，会耗费时间，因此不可能一点击就获取到
        this.$nextTick(()=>{
          this.$refs[index].focus();
        })
      },
      // 气泡确认框确认按钮回调
      deleteAttrValue(index){
        // 删除数组中索引值为index的属性值，当前操作不需要发请求
        this.attrInfo.attrValueList.splice(index,1);
      },
      // 保存按钮回调--添加或修改属性
      async addOrUpdateAttr(){
        // 整理参数
        // this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item=>{
        //   // 过滤掉属性值为空的
        //   if(item.valueName!=""){
        //     // 删除flag属性
        //     delete item.flag;
        //     return true;
        //   }
        // });
        let ok = true; //标识属性值列表中是否有空元素
        for(let item of this.attrInfo.attrValueList){
          if(item.valueName==""){
            ok = false;
            this.$message('属性值列表中存在空内容');
            break;
          }
        }
        // 如果属性值列表中不存在空元素
        if(ok){
          // 删除flag属性
          for(let item in this.attrInfo.attrValueList){
              delete item.flag;
          }
          // 发请求
          let result = await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo);
          if(result.code==200){
            this.getAttrList();
            this.$message.success('保存成功');
            this.isShowTable = true;
          }else {
            this.$message.warning('保存失败');
          }
        }
      }
    },
}
</script>

<style>

</style>